<template>
  <div class="table-list-wrapper">
    <el-table :data="list" style="width: 100%" border height="640">
      <el-table-column prop="start_time" label="开始时间" width="200" />
      <el-table-column prop="end_time" label="结束时间" width="200" />
      <el-table-column prop="order_num" label="下单数量" width="200" />
      <el-table-column prop="sale_amount" label="销售额" width="200" />
      <el-table-column label="状态" width>
        <template slot-scope="scope">
          <div>{{ formatStatus(scope.row.status) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="发布" width>
        <template slot-scope="scope">
          <div>
            <el-switch v-model="scope.row.is_publish" active-color="#13ce66" @change="publishChange(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 1"
            type="primary"
            class="edit"
            @click="stop(scope.row)"
          >立即停止</el-button>
          <el-button
            v-if="scope.row.status === 2"
            type="primary"
            class="edit"
            @click="edit(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="scope.row.status === 1 || scope.row.status === 3"
            type="primary"
            class="del"
            @click="check(scope.row)"
          >查看</el-button>
          <el-button
            v-if="scope.row.status === 3 || scope.row.status === 2"
            type="primary"
            class="del"
            @click="deleteItem(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { deleteSeckill, stopSecKill, setPublish } from '@/api/seckill'
const ERR_OK = 200
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0,
      value: true,
      dialogVisible: false,
      id: '',
      dialogImageUrl: '',
      imgDialogVisiable: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resitHeight()
    })
  },
  methods: {
    publishChange(row) {
      const is_publish = row.is_publish ? 1 : 0
      this._setPublish({ id: row.id, is_publish })
        .then(() => {
        })
        .catch(() => {
          console.log('err')
          row.is_publish = 0
        })
    },
    formatStatus(status) {
      if (status === 1) {
        return '秒杀中'
      } else if (status === 2) {
        return '秒杀预告'
      } else if (status === 3) {
        return '秒杀结束'
      }
    },
    stop(row) {
      this._stopSecKill(row.id).then(() => {
        this.$emit('success')
      })
    },
    edit(item) {
      this.$router.push({
        path: '/seckill/add-mng',
        query: { id: item.id, checked: false }
      })
    },
    check(item) {
      this.$router.push({
        path: '/seckill/add-mng',
        query: { id: item.id, checked: true }
      })
    },
    deleteItem(row) {
      this._deleteSeckill(row.id).then(() => {
        this.$emit('success')
      })
    },
    resitHeight() {
      this.height = document.body.clientHeight - 300
      window.onresize = () => {
        this.height = document.body.clientHeight - 300
      }
    },
    _upDataActivetyStatus({ id, is_publish }) {},
    _deleteSeckill(id) {
      return deleteSeckill(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _stopSecKill(id) {
      return stopSecKill(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _setPublish({ id, is_publish }) {
      return setPublish({ id, is_publish })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-button.scss";
.el-table /deep/ .cell {
  .el-avatar {
    margin-right: 15px;
  }
}
.table-list-wrapper {
  margin-top: 35px;
}
.d-flex {
  display: flex;
  align-items: center;
}
.edit {
  background: #00adb3;
  border-color: #00adb3;
  color: #fff;
}
.del {
  background: #dddddd;
  border-color: #dddddd;
  color: #000;
}
</style>
